<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        .controlTab{
            border: 1px solid #ccc;
            width: 240px;
            height: 200px;
            margin: 50px auto;
        }
        .controlTab .control{
            height: 40px;
            text-align: center;
            color: #666;
            font-size: 15px;
        }
        .controlTab .control .active{
            color: #0c6ad4;
            font-weight: bold;
            border-top: 2px solid #0c6ad4;
        }
        .controlTab .control li{
            float: left;
            width: 60px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            box-sizing: border-box;
            border-top: 2px solid transparent;
            margin-top: -1px;
        }
        .controlTab .control li a:hover{
            text-decoration: underline;
            color: red;
        }
        .controlTab .control li:not(:last-child)::after{
            content: "|";
            float: right;
            font-size: 14px;
            color: #ccc;
        }
        .content > li{
            height: 30px;
            line-height: 30px;
            display: none;
            padding-left: 10px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="controlTab">
        <ul class="control">
            <li class="active"><a href="#">头条</a></li>
            <li><a href="#">社会</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">军情</a></li>
        </ul>
        <ol class="content">
            <li style="display: block;">
                <ul>
                    <li>法国强塞给中国一地 起大作用</li>
                    <li>这个美国人将访华 蔡英文急了</li>
                    <li>中俄联手安倍慌了!日亏458亿</li>
                    <li>对朝动武明显!美战机亮相关岛</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>女司机醉驾：我是北大不是吓大的</li>
                    <li>12岁癌症晚期!这些习惯必须要改了</li>
                    <li>知名火锅店竟用潲水油分店超百家</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>赵丽颖遭炮轰：土得只配代言化肥</li>
                    <li>宋丹丹三婚嫁百亿富豪 近照吓坏了</li>
                    <li>马苏这胯也太宽了吧!裙子快撑破了</li>
                    <li>冯小刚老婆曾被王志文赶出家门</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>法国强塞给中国一地 起大作用</li>
                    <li>这个美国人将访华 蔡英文急了</li>
                    <li>中俄联手安倍慌了!日亏458亿</li>
                    <li>对朝动武明显!美战机亮相关岛</li>
                    <li>中国最神秘部队 被西方称魔鬼</li>
                </ul>
            </li>
        </ol>
    </div>
    <div class="controlTab">
        <ul class="control">
            <li class="active"><a href="#">头条</a></li>
            <li><a href="#">社会</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">军情</a></li>
        </ul>
        <ol class="content">
            <li style="display: block;">
                <ul>
                    <li>法国强塞给中国一地 起大作用</li>
                    <li>这个美国人将访华 蔡英文急了</li>
                    <li>中俄联手安倍慌了!日亏458亿</li>
                    <li>对朝动武明显!美战机亮相关岛</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>女司机醉驾：我是北大不是吓大的</li>
                    <li>12岁癌症晚期!这些习惯必须要改了</li>
                    <li>知名火锅店竟用潲水油分店超百家</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>赵丽颖遭炮轰：土得只配代言化肥</li>
                    <li>宋丹丹三婚嫁百亿富豪 近照吓坏了</li>
                    <li>马苏这胯也太宽了吧!裙子快撑破了</li>
                    <li>冯小刚老婆曾被王志文赶出家门</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>法国强塞给中国一地 起大作用</li>
                    <li>这个美国人将访华 蔡英文急了</li>
                    <li>中俄联手安倍慌了!日亏458亿</li>
                    <li>对朝动武明显!美战机亮相关岛</li>
                    <li>中国最神秘部队 被西方称魔鬼</li>
                </ul>
            </li>
        </ol>
    </div>
    <div class="controlTab">
        <ul class="control">
            <li class="active"><a href="#">头条</a></li>
            <li><a href="#">社会</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">军情</a></li>
        </ul>
        <ol class="content">
            <li style="display: block;">
                <ul>
                    <li>法国强塞给中国一地 起大作用</li>
                    <li>这个美国人将访华 蔡英文急了</li>
                    <li>中俄联手安倍慌了!日亏458亿</li>
                    <li>对朝动武明显!美战机亮相关岛</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>女司机醉驾：我是北大不是吓大的</li>
                    <li>12岁癌症晚期!这些习惯必须要改了</li>
                    <li>知名火锅店竟用潲水油分店超百家</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>赵丽颖遭炮轰：土得只配代言化肥</li>
                    <li>宋丹丹三婚嫁百亿富豪 近照吓坏了</li>
                    <li>马苏这胯也太宽了吧!裙子快撑破了</li>
                    <li>冯小刚老婆曾被王志文赶出家门</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>法国强塞给中国一地 起大作用</li>
                    <li>这个美国人将访华 蔡英文急了</li>
                    <li>中俄联手安倍慌了!日亏458亿</li>
                    <li>对朝动武明显!美战机亮相关岛</li>
                    <li>中国最神秘部队 被西方称魔鬼</li>
                </ul>
            </li>
        </ol>
    </div>

    <script>
//        步骤：
//        1、创建一个构造函数
//        2、分析把变量变成实例对象的属性，使用该属性时须在前增加this对象
//        3、如果构造函数里有使用非实例对象的this，须必区分this
//        4、把构造函数里的子函数增加到构造器的原型上，在构造函数里调用该方法且由实例对象去调用，如果有参数就传出
        function ControlTab(element){
            var _self = this;
            this.aControl = element.querySelectorAll(".control li");
            this.aContent = element.querySelectorAll(".content > li");

            for(var i = 0, len = this.aControl.length; i < len; i++){
                this.aControl[i].index = i;
                this.aControl[i].onmouseover = function(){
                    _self.mouseover(this);
                };
            }
        }
        ControlTab.prototype.mouseover = function(_this){
            for(var i = 0, len = this.aControl.length; i < len; i++){
                this.aControl[i].removeAttribute("class");
                this.aContent[i].style.display = "none";
            }
            _this.className = "active";
            this.aContent[_this.index].style.display = "block";
        };
        var aDiv = document.querySelectorAll(".controlTab");
        new ControlTab(aDiv[0]);
        new ControlTab(aDiv[1]);
        new ControlTab(aDiv[2]);
    </script>
</body>
</html>